<template>
  <div class="new-songs">
    <table id="table">
      <tr
        class="detail-info"
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in songsMsg"
        :key="index"
        @dblclick="addSong(index)"
        @click="trClick(index)"
      >
        <td class="other">
          <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
          <img v-lazy="item.album.picUrl" alt="">
        </td>
        <td class="title"
            :class="{dbActive: $store.state.playContent.playId === item.id}">
          {{ item.name }}
        </td>
        <td class="singer">
          <span v-for="(iitem, index) in item.artists" :key="index">
            {{ iitem.name }}
          </span>
        </td>
        <td class="album">
          {{ item.album.name }}
        </td>
        <td class="time">{{item.duration | filterTime}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { home } from "@/network/home";
import { format } from '@/components/common/utilis'

export default {
  name: "NewSongs",
  data() {
    return {
      currentIndex: "",
      songlist:[],  //‘播放全部’歌单列表
      songsMsg:[],  //请求的数据
    };
  },
  created() {
    //获取新歌速递数据
    this.getNewMusic('0')
    //传进来新的type重新请求数据
    this.$bus.$on('IndexChange',(item) => {
      this.getNewMusic(item.id)
    })
    //传送过来的'播放全部'事件
    this.$bus.$on('emitPlayAll', () => {
      this.songsMsg.forEach(item => {
        const songContent = {};
        let player = []
        songContent.playId = item.id;
        songContent.playImg = item.album.picUrl;
        item.artists.forEach(iitem => player.push(iitem.name))
        songContent.player = player.join(' ');
        songContent.playName = item.album.name;
        this.songlist.push(songContent)
      })
      this.$store.commit('playAll', this.songlist)
    })
  },
  filters:{
    // 格式化歌曲时间
    filterTime(value){
      return format(value/1000)
    }
  },
  beforeDestroy() {
    //关闭事件总线，不然会多次触发事件，这里会发送多次”播放全部“的事件，
    this.$bus.off('emitPlayAll')
    // this.$bus.off('IndexChange') //本来加载数据很慢，注释掉这个貌似变快了？是我的错觉吗
  },
  methods: {
    //点击tr改变背景颜色的方法
    trClick(index) {
      this.currentIndex = index;
    },
    //双击添加歌曲信息的方法
    addSong(index) {
      const songContent = {};
      let player = []
      songContent.playId = this.songsMsg[index].id;
      songContent.playImg = this.songsMsg[index].album.picUrl;
      songContent.playName = this.songsMsg[index].name;
      this.songsMsg[index].artists.forEach(iitem => player.push(iitem.name))
      songContent.player = player.join(' ');
      songContent.a = ''
      this.$store.commit("addSongs", songContent);
    },
    //获取新歌速递数据的函数
     getNewMusic(type){
      home.getNewMusic(type).then(res => {
        this.songsMsg = res.data.data
      })
    },
  },
};
</script>

<style scoped>
table {
  padding-top: 30px;
  font-size: 13px;
}
table tr:nth-child(odd) {
  background-color: #f9f9f9;
}
tr td {
  display: inline-block;
  /*height: 60px;*/
  line-height: 60px;
  color: #2a2727;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
table tr:hover {
  background-color: #f0f1f2;
}
.other {
  width: 140px;
  color: #959090;
  padding-left: 20px;
}
.other span{
  vertical-align: middle;
}
.other img {
  position: relative;
  top: 5px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}
.detail-info td{
  color: #8b7d7d;
}
.detail-info .title{
  color: #363333;
}
.title {
  width: 350px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
.singer {
  width: 260px;
}
.album{
  width: 280px;
}
.time {
  width: 60px;
}
/*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
#table .active {
  background-color: #e5e5e5;
}
#table .dbActive{
  color: #f14465;
}
</style>
